<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { IconSelect } from "@/components/ReIcon";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    titlePre: "菜单",
    parentId: 0,
    menuName: "",
    menuIcon: "",
    menuCode: "",
    menuType: 1,
    menuUri: "",
    sort: 1,
    menuStatus: 1
  }),
  treeData: null
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="105px"
  >
    <el-row justify="center">
      <re-col :value="18">
        <el-form-item
          :label="newFormInline.titlePre === '菜单' ? '父级菜单' : '所属菜单'"
          prop="parentId"
        >
          <!-- 新增显示上级 -->
          <div v-if="newFormInline.title === '新增'">
            {{ newFormInline.parentName || "一级菜单" }}
          </div>
          <!-- 编辑选择父级 -->
          <el-tree-select
            v-else
            v-model="newFormInline.parentId"
            default-expand-all
            node-key="id"
            check-strictly
            :data="treeData || []"
            :props="{ children: 'children', label: 'menuName' }"
          />
        </el-form-item>
      </re-col>
    </el-row>
    <el-row justify="center">
      <re-col :value="18">
        <el-form-item :label="newFormInline.titlePre + '名称'" prop="menuName">
          <el-input
            v-model="newFormInline.menuName"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
    </el-row>
    <el-row justify="center">
      <re-col :value="18">
        <el-form-item
          v-if="newFormInline.titlePre === '菜单'"
          :label="newFormInline.titlePre + '路径'"
          prop="menuUri"
        >
          <el-input
            v-model="newFormInline.menuUri"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          :label="newFormInline.titlePre === '菜单' ? '菜单Name' : '按钮标识'"
          prop="menuCode"
        >
          <el-input
            v-model="newFormInline.menuCode"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
    </el-row>

    <el-row justify="center">
      <re-col :value="18">
        <el-form-item :label="newFormInline.titlePre + '排序'" prop="sort">
          <el-input
            v-model="newFormInline.sort"
            clearable
            type="number"
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
    </el-row>

    <!-- 菜单字段 -->
    <el-row v-if="newFormInline.titlePre === '菜单'" justify="center">
      <re-col :value="18">
        <el-form-item label="菜单图标" prop="menuIcon">
          <IconSelect v-model="newFormInline.menuIcon" />
        </el-form-item>
      </re-col>
      <re-col :value="18">
        <el-form-item label="是否隐藏" prop="menuStatus">
          <el-switch
            v-model="newFormInline.menuStatus"
            :active-value="2"
            :inactive-value="1"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
